import  { useEffect, useState } from 'react';
import { Swiper } from "antd-mobile";
import axios from 'axios';
import { MessageOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';

interface BeautifulItem {
    _id: string;
    img: string;
    name: string;
    date: string;
    shareImg: string;
    zan: number;
    share: number;
}

interface CommentItem {
    Bid: { _id: string };
    // 其他字段...
}

const ShareBeautiful = () => {
    const [beautifulData, setBeautifulData] = useState<BeautifulItem[]>([]);
    const [list, setList] = useState<CommentItem[]>([]);

    const BeautifulData = () => {
        axios.get("http://localhost:3000/wxy/beautiful").then(res => {
            setBeautifulData(res.data.data)
        })
    }
    const listdata = () => {
        axios.get("http://localhost:3000/wxy/gitping").then(res => {
            setList(res.data.data)
        })
    }
    useEffect(() => {
        BeautifulData()
        listdata()
    }, [])
    const navigate = useNavigate()
    const handleDetail = (item: BeautifulItem) => {
        navigate('/details', { state: { item } })
    }

    return (
        <div>
            <div style={{ marginTop: "0.1rem" }}>
                <h5 style={{ fontSize: '0.16rem' }}>分享美丽</h5>
            </div>
            <div>
                {
                    beautifulData.map((item, index) => {
                        return (
                            <div key={index} style={{
                                backgroundColor: "white",
                                borderRadius: "0.08rem",
                                boxShadow: "0 0.02rem 0.04rem rgba(0, 0, 0, 0.1)",
                                padding: "0.1rem",
                                marginBottom: "0.1rem"
                            }}>
                                <div style={{ display: "flex", alignItems: "center", margin: "0 0 0.1rem 0" }}
                                    onClick={() => handleDetail(item)}
                                >
                                    <img src={item.img} alt="" style={{ borderRadius: "50%", marginRight: "0.1rem", width: "0.4rem" }} />
                                    <div>
                                        <p style={{ margin: 0, fontSize: "0.14rem" }}>{item.name}</p>
                                        <p style={{ margin: 0, fontSize: "0.12rem", color: "#999" }}>{item.date}</p>
                                    </div>
                                </div>
                                <div>
                                    <Swiper
                                        loop={false}
                                        autoplay
                                    >
                                        <Swiper.Item key={index}>
                                            <div>
                                                <img src={item.shareImg} alt="" width={"100%"} style={{ borderRadius: "0.04rem" }} />
                                            </div>
                                        </Swiper.Item>
                                    </Swiper>
                                </div>
                                <div style={{ margin: "0.1rem 0 0 0", display: "flex", gap: "0.2rem", fontSize: "0.12rem" }}>
                                    <span> ❤️ {item.zan} </span>
                                    <span> <MessageOutline />&nbsp;
                                        {
                                            list.filter(items => {
                                                return items.Bid._id === item._id
                                            }).length
                                        }
                                        &nbsp;
                                    </span>
                                    <span>
                                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="1497" width="13" height="1">
                                            <path d="M746 112c82.84 0 150 67.16 150 150S828.84 412 746 412 596 344.84 596 262 663.16 112 746 112z m0 48C689.668 160 644 205.668 644 262S689.668 364 746 364 848 318.332 848 262 802.332 160 746 160zM746 612c82.84 0 150 67.16 150 150S828.84 912 746 912 596 844.84 596 762s67.16-150 150-150z m0 48c-56.332 0-102 45.668-102 102s45.668 102 102 102 102-45.668 102-102-45.668-102-102-102zM262 364c82.84 0 150 67.16 150 150S344.84 664 262 664 112 596.84 112 514 179.16 364 262 364z m0 48C205.668 412 160 457.668 160 514S205.668 616 262 616 364 570.332 364 514 318.332 412 262 412z" fill="#333333" p-id="1498">
                                            </path>
                                            <path d="M337.7 442.744l293.488-169.62 40.464 70.16-293.484 169.62zM387.708 526.728l277.02 160.12-40.468 70.156-277.02-160.12z" fill="#333333" p-id="1499"></path>
                                        </svg>
                                        &nbsp;
                                        {item.share}
                                    </span>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default ShareBeautiful;